<template>
  <div id="shopSiccess-box">
    <div id="shopSiccess-heard">
      <div>
        <img onclick="fh()" src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BD%91%E7%BB%9C%E5%BC%82%E5%B8%B8/u272.png"/>
        <span>支付成功</span>
      </div>
    </div>
    <div id="shopSoccess-body">
      <div class="shopSoccess-body-1">
        <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F/u4080.png"/>
        <van-badge position="bottom-right" color="#1989fa">
          <div class="child" />
          <template #content>
            <van-icon name="success" class="badge-icon" />
          </template>
        </van-badge>
        <p style="font-size:20px">订单支付成功</p>
        <p>订单金额：￥299.00</p>
      </div>
      <div class="shopSoccess-body-2">
        <button class="but1" @click="ckdd()">查看订单</button>
        <button class="but2" @click="fhsy()">返回首页</button>
      </div>
    </div>
  </div>
</template>

<script>
  import {useRouter} from 'vue-router'

export default {
  setup(){
    const router = useRouter();
    function ckdd(){
      router.push({path:''})
    }
    function fhsy(){
      router.push({path:'home'})
    }
    return{
      fhsy,
      ckdd
    }
  }
}
</script>

<style scoped>
  #shopSiccess-box{width: 390px;height: 844px; background-color: #f2f2f2;}
  /* --------------------------------------------------------------------- */
  #shopSiccess-heard{width: 100%; height: 10%; background-color: #ffffff;}
  #shopSiccess-heard div{line-height: 500%;}
  #shopSiccess-heard div span{margin-left: 40%;}
  /* -------------------------------------------------------------------------- */
  #shopSoccess-body{width: 100%; height: 40%; background-color: #ffffff;margin-top: 2px;}
  .shopSoccess-body-1{width: 100%; height: 60%; text-align: center;}
  .shopSoccess-body-1 img{margin-top: 6%;}
  .shopSoccess-body-2{width: 100%; height: 40%;}  
  .but1{color: #ffffff; width: 80%; height: 40%; background-color: #ec7b67;border:0;border-radius: 6px;margin-left: 10%;}
  .but2{color: #ec7b67;width: 80%; height: 40%; background-color: white;border: 1px solid #ec7b67; border-radius: 5px;margin-left: 10%;margin-top: 4%;}
</style>